import React, { Fragment, memo, useEffect, useState } from 'react';
import { Breadcrumb, Card, Input, Table, Button } from 'antd';

import { DeleteOutlined, EditOutlined } from '@ant-design/icons';
import { Link } from 'react-router-dom';
import { getGoods } from '../../api';
const { Search } = Input;
export default memo(function Goods() {
  const [goodsTableData, setGoodsTable] = useState([]);
  const [queryInfo, setQueryInfo] = useState({
    query: '',
    pagesize: 3,
    pagenum: 1
  })

  const [total, setTotal] = useState({});

  useEffect(() => {
    reqGoods()
  }, [])
  const reqGoods = async () => {
    const res = await getGoods(queryInfo);
    if (res) {
      setTotal(res.total);
      setGoodsTable(res.goods)
    }
  }
  const searchClick = () => {
  }

  const columns = [
    {
      title: '#',
      key: 'id',
      width: 70
    },
    {
      title: '商品名称',
      dataIndex: 'goods_name',
    },
    {
      title: '商品价格(元)',
      dataIndex: 'goods_price',
      width: 150
    },
    {
      title: '商品重量',
      dataIndex: 'goods_weight',
      width: 150
    },
    {
      title: '创建时间',
      key: 'add_time',
      width: 200,
      render: (v) => {
        const date = new Date(v.add_time);
        const y = date.getFullYear();
        const m = data.getMounth() + 1;

        return <span>{v.add_time}</span>
      }
    },
    {
      title: '操作',
      key: 'id',
      width: 150,
      render: (item) => <Fragment> <Button><EditOutlined /></Button> <Button style={{ marginLeft: '10px' }}><DeleteOutlined /></Button>     </Fragment>
    }
  ];

  return <Fragment>
    <Breadcrumb style={{ marginBottom: '10px' }} >
      <Breadcrumb.Item>
        <Link to='/'>
          首页
        </Link>
      </Breadcrumb.Item>
      <Breadcrumb.Item>
        商品管理
      </Breadcrumb.Item>
      <Breadcrumb.Item>
        商品列表
      </Breadcrumb.Item>
    </Breadcrumb>
    <Card title={<Fragment >
      <Search placeholder="input search text" allowClear onSearch={searchClick} style={{ width: 200 }} />
      <Button style={{ marginLeft: '10px' }} >添加商品</Button>
    </Fragment>
    } >
      <Table
        columns={columns}
        dataSource={goodsTableData}
      />
    </Card>
  </Fragment>
}
)